<script setup>
import { inject, ref } from "vue";
import { collectApi, stateApi, collectionListApi } from "@/services/collection";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { formatPrice } from "@/utils/formatPrice";

onLoad(() => {
  setTimeout(() => {
    getList();
  }, 100);
});

const options2 = ref([
  {
    text: "删除",
    style: {
      backgroundColor: "#F3498B ",
      fontSize: "28rpx",
      color: "#FFFFFF",
    },
  },
]);

const bindClick = async (item) => {
  try {
    // 发送请求
    let res = await collectApi({ product_id: item.product.product_id });
    if (res.code === 200) {
      uni.showToast({
        title: "取消收藏成功",
        icon: "none",
      });
      setTimeout(() => {
        form.value.page = 1;
        collectionData.value = [];
        getList();
      }, 300);
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};

//收藏列表
const form = ref({ page: 1, limit: 20 });
const collectionData = ref([]);
const status = ref("more");
const getList = async () => {
  try {
    status.value = "loading";
    // 发送请求
    let res = await collectionListApi(form.value);
    if (res.code === 200) {
      let arr = [];
      arr = res.data.list;
      collectionData.value = collectionData.value.concat(arr);
      if (res.data.list.length < form.value.limit) {
        status.value = "no-more";
      } else {
        status.value = "more";
      }
      form.value.page++;
    }
  } catch (e) {
    status.value = "no-more";
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};

const goGoods = (product_id) => {
  uni.navigateTo({
    url: "/pages/goods/details/index?id=" + product_id,
  });
};
</script>

<template>
  <view class="content">
    <view
      class="content-card"
      v-show="collectionData && collectionData.length > 0"
    >
      <uni-swipe-action v-for="(item, index) in collectionData" :key="index">
        <uni-swipe-action-item
          :right-options="options2"
          :show="isOpened"
          :auto-close="false"
          @click="bindClick(item)"
        >
          <view class="content-box">
            <view class="content-left">
              <image :src="item.product.image" mode="aspectFill"></image>
            </view>
            <view
              class="content-right"
              @click.stop="goGoods(item.product.product_id)"
            >
              <text>{{ item.product.store_name }}</text>
              <text>会员价:¥{{ formatPrice(item.product.vip_price) }}</text>
              <text>{{ item.create_time }}</text>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>

    <view class="nodate-bt" v-if="collectionData.length === 0">
      <image src="/static/nodate/nodate.png" mode="widthFix"></image>
    </view>

    <uni-load-more color="#c6c5c3" :status="status" />
  </view>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
